import { StyleSheet } from 'react-native'
import pxToDp, { deviceHeightDp, deviceWidthDp } from './pxToDp'
const activeColor = '#C30D23'
const Gray1Color = '#878787'
const Gray2Color = '#f5f5f5'
const weixinColor = '#66CC00'

function createPaddingAndMargin (val) {
  let res = {}
  for (let i = val; i > 0; i -= 10) {
    res[`p${i}`] = {
      padding: pxToDp(i)
    }
    res[`pl${i}`] = {
      paddingLeft: pxToDp(i)
    }
    res[`pr${i}`] = {
      paddingRight: pxToDp(i)
    }
    res[`pt${i}`] = {
      paddingTop: pxToDp(i)
    }
    res[`pb${i}`] = {
      paddingBottom: pxToDp(i)
    }

    res[`m${i}`] = {
      margin: pxToDp(i)
    }
    res[`ml${i}`] = {
      marginLeft: pxToDp(i)
    }
    res[`mr${i}`] = {
      marginRight: pxToDp(i)
    }
    res[`mt${i}`] = {
      marginTop: pxToDp(i)
    }
    res[`mb${i}`] = {
      marginBottom: pxToDp(i)
    }
  }
  return res
}

function createFontSize (val) {
  let res = {}
  for (let i = val; i > 8; i--) {
    res[`f${i}`] = {
      fontSize: pxToDp(i)
    }
  }
  return res
}

function createWidth (val) {
  let res = {}
  for (let i = val; i > 0; i -= 10) {
    res[`w${i}`] = {
      width: pxToDp(i)
    }
  }
  return res
}
function createWidthPer (val) {
  let res = {}
  for (let i = val; i > 0; i -= 1) {
    res[`wp${i}`] = {
      width: i + '%'
    }
  }
  return res
}
function createHeight (val) {
  let res = {}
  for (let i = val; i > 0; i -= 10) {
    res[`h${i}`] = {
      height: pxToDp(i)
    }
  }
  return res
}
function createHeightPer (val) {
  let res = {}
  for (let i = val; i > 0; i -= 1) {
    res[`hp${i}`] = {
      height: i + '%'
    }
  }
  return res
}
function createCircle (val) {
  let res = {}
  for (let i = val; i > 0; i -= 5) {
    res[`circle${i}`] = {
      borderRadius: pxToDp(i)
    }
  }
  return res
}

function createLineHeight (val) {
  let res = {}
  for (let i = val; i > 0; i -= 10) {
    res[`lineHeight${i}`] = {
      lineHeight: pxToDp(i)
    }
  }
  return res
}

let stylesObj = {
  h3: {
    fontSize: pxToDp(36),
    fontWeight: 'bold',
    color: '#000',
    fontFamily: 'Arial'
  },
  fontBold: {
    fontWeight: 'bold'
  },
  activeColor: {
    color: activeColor
  },
  activeBackgroundColor: {
    backgroundColor: activeColor
  },
  activeBorderColor: {
    borderColor: activeColor
  },
  grayBorderColor: {
    borderColor: Gray1Color
  },
  colorTips: {
    color: '#A5A5A5'
  },
  colorWhite: {
    color: '#fff'
  },
  colorRed: {
    color: 'red'
  },
  weixinColor: {
    color: weixinColor
  },
  backgroundColorWhite: {
    backgroundColor: '#fff'
  },
  backgroundColorGray: {
    backgroundColor: Gray2Color
  },
  backgroundColorOrange: {
    backgroundColor: '#f08300'
  },
  backgroundColorActive: {
    backgroundColor: activeColor
  },
  colorGray: {
    color: Gray1Color
  },
  colorOrange: {
    color: '#f08300'
  },
	colorBlack1: {
		color: 'rgba(25,29,33,1)'
	},
	colorBlack2: {
		color: 'rgba(51,51,51,1)'
	},
	colorGray1: {
		color: 'rgb(107, 107, 107)'
	},
	colorGray2: {
		color: 'rgb(153, 153, 153)'
	},
  colorBlue: {
    color: 'blue'
  },
  colorBlue2: {
    color: 'rgb(0, 115, 146)'
  },
  colorBlue3: {
    color: 'rgb(0, 158, 163)'
  },
  colorBlackLight: {
    color: '#404040'
  },

  colorGreen: {
    color: '#99CC99'
  },

  textCenter: {
    textAlign: 'center'
  },
  textRight: {
    textAlign: 'right'
  },

  border: {
    borderWidth: pxToDp(1),
    borderColor: '#eee'
  },
  borderBottom: {
    borderBottomWidth: pxToDp(1),
    borderBottomColor: '#eee'
  },
  borderLeft: {
    borderLeftWidth: pxToDp(1),
    borderLeftColor: '#eee'
  },
  borderRight: {
    borderRightWidth: pxToDp(1),
    borderRightColor: '#eee'
  },

  flexCenter: {
    justifyContent: 'center',
    alignItems: 'center'
  },
  flexVerticalCenter: {
    alignItems: 'center'
  },
  flexHorizontalCenter: {
    justifyContent: 'center'
  },
  flexJustifyBetween: {
    justifyContent: 'space-between'
  },
  flexColumn: {
    flexDirection: 'column'
  },
  flexRow: {
    flexDirection: 'row'
  },
  flexWrap: {
    flexWrap: 'wrap'
  },
  flexItem: {
    flex: 1
  },

  windowHeight: {
    height: deviceHeightDp
  },
  windowWidth: {
    height: deviceWidthDp
  },

  shadowGray: {
    shadowColor: '#f5f5f5',
    shadowOffset: { h: 1, w: 1 },
    shadowRadius: 7,
    shadowOpacity: 0.7
  },
  hidden: {
    overflow: 'hidden'
  },
  posRelative: {
    position: 'relative'
  },

  tabBarStyle: {
    backgroundColor: '#efefef',
    color: '#333'
  },
  titleStyle: {
    color: '#333'
  }

  // boxShadow: {
  //   boxShadow: `0 ${pxToDp(4)}px ${pxToDp(20)}px 0 rgba(0, 0, 0, 0.1)`,
  //   borderRadius: pxToDp(20),
  //   background: '#fff'
  // }
}
stylesObj = {
  ...stylesObj,
  ...createPaddingAndMargin(100),
  ...createFontSize(100),
  ...createWidth(300),
  ...createWidthPer(100),
  ...createHeight(300),
  ...createHeightPer(100),
  ...createCircle(100),
  ...createLineHeight(100)
}
const styles = StyleSheet.create(stylesObj)

export default styles
